<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eff2f5;
            overflow: hidden;
        }

        .theme {
            width: 88%;
            float: right;
        }

        .top {
            height: 50px;
            background-color: white;
            box-shadow: 4px 4px 4px #ccc;
            display: flex;
            align-items: center;
        }


        .tab {
            width: 12%;
            height: 100%;
            background-color: #304156;
            position: fixed;
            top: 0;
        }

        .user {
            height: 60px;
            background-color: #1d324b;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .kuai {
            height: 60px;
            color: #bfcbd9;
            display: flex;
            align-items: center;
            padding-left: 20px;
            cursor: pointer;
            /* 设置kuai里面的文本不可选中 */
            user-select: none;
        }

        .kuai:hover {
            background-color: #263445;
        }

        #sonLayout {
            width: 96%;
            margin: auto;

        }

        .table{
            margin-top: 20px;
        }

        .data td{
            border: 1px solid #ccc;
            height: 50px;
        }
    </style>


</head>

<body>

    <div id="app">
        <div class="tab">

            <div class="user">
                admin
            </div>
            <a href="/">
            <div id="list" class="kuai" style="color: #008ae6;">
                商品列表
            </div>
        </a>
            <a href="addTo">
            <div id="tianija" class="kuai">
                商品添加
            </div>
        </a>

        </div>


        <div class="theme">

            <div class="top"></div>


            <div id="sonLayout">

                <table class="table" style="width: 100%;border: 1px solid #ccc;">

                    <tr class="dataTitle">
                        <td>商品名称</td>
                        <td>商品图片</td>
                        <td>价格</td>
                        <td>库存</td>
                        <td>上架时间</td>
                        <td>查看</td>
                        <td>修改</td>
                        <td>删除</td>
                    </tr>
                    <tr class="data" v-for="item in indexData"> 
                        <td>{{item.name}}</td>
                        <td><img :src="item.img" alt="" style="width: 50px;height:50px;"></td>
                        <td>{{item.price}}</td>
                        <td>{{item.stock}}</td>
                        <td>{{item.shelfTime}}</td>
                        <td><button @click="cha(item.id)" style="height: 30px;width:100%;background-color:#ccc;border: 0;color: white;">查看</button></td>
                        <td><button @click="gai(item.id)" style="height: 30px;width:100%;background-color:#41c9ff;border: 0;color: white;">修改</button></td>
                        <td><button @click="shan(item.id)" style="height: 30px;width:100%;background-color:#ff6c6c;border: 0;color: white;">删除</button></td>
                    </tr>


                </table>

            </div>


        </div>
    </div>
 </body>

<script src="vue.js"></script>
<script src="jquery-3.5.1.js"></script>

<!-- 插件 -->
<script src="/layer/layer.js"></script>
<script src="/layui/layui.js"></script>


<script>


    let vm = new Vue({
        el: "#app",
        data: {
            indexData: '',

        },
        methods: {

            shuju(data) {
                this.indexData = data;
                // console.log(data);
                console.log(this.indexData);
            },
            cha(id){
                location.href = `cha?id=${id}`
            },
            gai(id){
                location.href = `gai?id=${id}`
            },
            shan(id){
                location.href = `shan?id=${id}`
                
            }
        },
        created() {
            var _this = this;
            $.get("/index", function (data) {
                _this.shuju(data)
            })
           
        },

    })

</script>

</html>